<figure id="figure-biased-stroke-examples" class="base-grid">

  <div id='container'>
    <div class="controls">
      <ColabLink :url/>
    </div>

    <div class="video-container">
      <video ref:video class="video" loop autoplay playsinline muted>
        <source ref:source src="{video_src}" type="video/mp4"/>
        Your browser does not support the video tag.
      </video>
    </div>
  
  </div>
  
</figure>


<style>
  figure {
    padding: 16px 0;
    border-top: 1px solid rgba(0, 0, 0, 0.1);
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
    
    transition: background 0.35s;
    
    grid-row-gap: 10px;
  }

  .video-container {
    grid-column: 1 / -1;

    display: flex;
    height: 100%;
    width: 100%;
    justify-content: center;
    align-items: center;
  }

  .video {
    border: 1px solid #000; 
    height: 100%; 
    width: 100%;
  }

  #container {
    display: grid;
    position: relative;
    z-index: 1;
    grid-gap: 8px;
    grid-template-columns: repeat(3, 1fr);
    grid-column: text-start / text-end;
  }
  
  @media (min-width: 768px) {
    #container {
      grid-template-columns: repeat(4, 1fr);
    }
  }
  
  @media (min-width: 1180px) {
    #container {
      grid-template-columns: repeat(4, 168px);
    }
  }
  
  figure {
    margin-top: 0;
    margin-bottom: 0;
  }
  
  .controls {
    grid-column: 1 / -1;
    
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    
    background-color: hsl(0, 0%, 97%);
    background-color: hsla(0, 0%, 97%, 0.85);
    padding: 8px;
    
    transition: opacity 0.35s, background-color 0.35s;
  }
  
  .controls > :global(.colab-root) {
    margin-top: 3px;
    margin-bottom: 3px;
  }
  

</style>


<script>
import ColabLink from '../components/ColabLink.html';
import { subsections } from '../colab_urls.json';
export default {

  data() {
    return {
      url: subsections[3].colab_url,
      video_src: "images/biased-stroke-examples/mnist.mp4"
    }
  },
  methods: {
    
  },
  components: { ColabLink }
}
</script>
